<script setup lang="ts">
import { watch, ref, onMounted, computed } from "vue";
import ReCol from "@/components/ReCol";
import { locationRules } from "./utils/rule";
import { LocationProps } from "./utils/types";
import { Ldristance } from '@/utils/api/BasicManagement/locations'

const rotationangleList = [
    {
        name: '左',
        code: 1
    }
    , {
        name: '右',
        code: 2
    }]
const lrdistanceList = ref([])
onMounted(async () => {
    // 左右伸缩距离
    let { Content: ldristance } = await Ldristance()
    lrdistanceList.value = ldristance
})

const props = withDefaults(defineProps<LocationProps>(), {
    formInline: () => ({
        rackId: null,
        code: "",
        name: "",
        layerSum: null,
        columnSum: null,
        length: null,
        width: null,
        height: null,
        prefix: "",
        attribute: "",
        rackHeight: []
    }),
    category: [],
    attributeSelect: []
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const category = ref(props.category);
const attributeSelect = ref(props.attributeSelect);

// 编码规则
const codingRulesList = [
    { Code: 1, Value: '前缀+货架编码(排)+层+列' },
    { Code: 2, Value: '前缀+货架编码(排)+列+层' }
]
function getRef() {
    return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
    <el-form ref="ruleFormRef" :model="newFormInline" :rules="locationRules" label-width="110px">
        <el-row :gutter="30">
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item label="货架编码" prop="code">
                    <el-input disabled v-model="newFormInline.code" clearable placeholder="请输入货架编码" />
                </el-form-item>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item label="货架名称" prop="name">
                    <el-input disabled v-model="newFormInline.name" clearable placeholder="请输入货架名称" />
                </el-form-item>
            </re-col>
            <!-- <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="货架总排数" prop="layerSum">
          <el-input-number disabled v-model="newFormInline.layerSum" controls-position="right" placeholder="请输入货架总排数" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="货架总列数" prop="columnSum">
          <el-input-number disabled v-model="newFormInline.columnSum" controls-position="right"
            placeholder="请输入货架总列数" />
        </el-form-item>
      </re-col> -->
            <!-- <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="货位长度" prop="length">
          <el-input-number v-model="newFormInline.length" controls-position="right" placeholder="请输入货位长度(CM)" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="货位宽度" prop="width">
          <el-input-number v-model="newFormInline.width" controls-position="right" placeholder="请输入货位宽度(CM)" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="货位高度" prop="height">
          <el-input-number v-model="newFormInline.height" controls-position="right" placeholder="请输入货位高度(CM)" />
        </el-form-item>
      </re-col> -->
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item label="货位编码前缀" prop="prefix">
                    <el-input v-model="newFormInline.prefix" clearable placeholder="请输入货位编码前缀" />
                </el-form-item>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item label="编码规则" prop="codingRules">
                    <el-select v-model="newFormInline.codingRules" filterable allow-create placeholder="请选择编码规则">
                        <el-option v-for="item in codingRulesList" :key="item.Code" :label="item.Value"
                            :value="item.Code" />
                    </el-select>
                </el-form-item>
            </re-col>
            <re-col :value="24" :xs="24" :sm="24">
                <el-form-item label="货位类型" prop="attribute">
                    <el-radio-group v-model="newFormInline.attribute">
                        <el-radio v-for="item in attributeSelect" :label="item.Code">{{ item.Name }}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </re-col>
            <re-col :value="24" :xs="24" :sm="24">
                <el-form-item label="货架高度" style="font-weight: 700;">
                    <el-table :data="newFormInline.rackHeight" border style="width: 100%">
                        <el-table-column prop="date" label="层数" width="80">
                            <template #default="scope">
                                <p>第{{ scope.row.layer }}层</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="lochighList" label="进入高度(M)" width="120">
                            <template #default="scope">
                                <el-input-number v-model="scope.row.lochighList" controls-position="right"
                                    placeholder="进入高度" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="lifthighList" label="抬升后高度(M)" width="120">
                            <template #default="scope">
                                <el-input-number v-model="scope.row.lifthighList" controls-position="right"
                                    placeholder="抬升后高度" />
                            </template>
                        </el-table-column>

                        <el-table-column prop="liftsideList" label="前进距离(M)" width="120">
                            <template #default="scope">
                                <el-input-number v-model="scope.row.liftsideList" controls-position="right"
                                    placeholder="前进距离" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="lrdistanceList" label="左右伸缩取货(M)" width="140">
                            <template #default="scope">
                                <el-select v-model="scope.row.lrdistanceList" filterable allow-create
                                    placeholder="请选择左右距离" style="width:100%">
                                    <el-option v-for="item in lrdistanceList" :key="item.Id" :label="item.Name"
                                        :value="item.Name" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="lrdistance2List" label="左右伸缩放货(M)" width="140">
                            <template #default="scope">
                                <el-select v-model="scope.row.lrdistance2List" filterable allow-create
                                    placeholder="请选择左右距离" style="width:100%">
                                    <el-option v-for="item in lrdistanceList" :key="item.Id" :label="item.Name"
                                        :value="item.Name" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="rotationangleList" label="旋转方向" width="120">
                            <template #default="scope">
                                <el-select v-model="scope.row.rotationangleList" filterable allow-create
                                    placeholder="请选择旋转方向" style="width:100%">
                                    <el-option v-for="item in rotationangleList" :key="item.code" :label="item.name"
                                        :value="item.code" />
                                </el-select>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </re-col>
            <!-- <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="货架承重">
          <el-table :data="newFormInline.bearingList" border style="width: 100%">
            <el-table-column prop="date" label="层数" width="80">
              <template #default="scope">
                <p>第{{ scope.row.layer }}层</p>
              </template>
            </el-table-column>
            <el-table-column prop="maxCapacity" label="承重">
              <template #default="scope">
                <el-input-number v-model="scope.row.maxCapacity" controls-position="right" placeholder="承重(KG)" />
              </template>
            </el-table-column>
            <el-table-column prop="lochigh" label="货位高度">
              <template #default="scope">
                <el-input-number v-model="scope.row.lochigh" controls-position="right" placeholder="叉车高度" />
              </template>
            </el-table-column>
            <el-table-column prop="category" label="存储类别">
              <template #default="scope">
                <el-select v-model="scope.row.category" placeholder="存储类别" style="width:100%">
                  <el-option v-for="item in category" :key="item.Id" :label="item.Name" :value="item.Id" />
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </re-col> -->
        </el-row>
    </el-form>
</template>

<style lang="scss" scoped>
.el-radio {
    margin-right: 16px;
}
</style>
